<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<head>   
<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
<script type="text/javascript" src="/${initParam.context_root}/script/address.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#cash").on("click", function(){
		$("#tbody").empty().append("<tr><td width='100px'>결제금액</td><td width='200px'>${requestScope.pc.completePrice+requestScope.deliveryInfo[0].defaultDeliveryFee }원</td></tr>")
		.append("<tr><td width='100px'></td><td width='230px'>상품가격(${requestScope.pc.completePrice}원) + 배송비(${requestScope.deliveryInfo[0].defaultDeliveryFee }원)</td></tr>")
		.append("<tr><td width='100px'>입금은행</td><td width='200px'>${requestScope.paymentInfo.bank }</td></tr>")
		.append("<tr><td width='100px'>입금계좌</td><td width='200px'>${requestScope.paymentInfo.accountNum }</td></tr>")
		.append("<tr><td width='100px'>예금주</td><td w>${requestScope.paymentInfo.depositor }</td></tr>")
		.append("<tr><td>입금자</td><td><input type='text' name='depositName' size='9'></td></tr>");		
	});
	$("#card").on("click", function(){
		$("#tbody").empty().append("<tr><td width='100px'>결제금액</td><td width='200px'>${requestScope.pc.completePrice+requestScope.deliveryInfo[0].defaultDeliveryFee }원</td></tr>")
		.append("<tr><td width='100px'></td><td width='230px'>상품가격(${requestScope.pc.completePrice}원) + 배송비(${requestScope.deliveryInfo[0].defaultDeliveryFee }원)</td></tr>")
		.append("<tr><td width='100px'>카드선택</td><td width='200px'><select name='card'><option>BC카드</option>"+
				"<option>국민카드</option><option>수협카드</option><option>제주카드</option><option>전북카드</option>"
				+"<option>우체국카드</option></select></td></tr>")
		.append("<tr><td width='100px'>카드번호</td><td><input type='text' name='cardNumber' placeholder=' - 제외하고 입력하세요'></td></tr>")
		.append("<tr><td width='100px'>비밀번호</td><td><input type='password' name='cardPassword' size='5'></td></tr>");
		
	});
	$("#phone").on("click", function(){
		$("#tbody").empty().append("<tr><td width='100px'>결제금액</td><td width='200px'>${requestScope.pc.completePrice+requestScope.deliveryInfo[0].defaultDeliveryFee }원</td></tr>")
		.append("<tr><td width='100px'></td><td width='230px'>상품가격(${requestScope.pc.completePrice}원) + 배송비(${requestScope.deliveryInfo[0].defaultDeliveryFee }원)</td></tr>")
		.append("<tr><td width='100px'>핸드폰번호</td><td width='200px'><input type='text' name='depositPhone' size='15' placeholder=' - 제외하고 입력하세요'></td></tr>")
		.append("<tr><td width='100px'>이름</td><td width='200px'><input type='text' name='depositName' size='15' placeholder='이름을 입력하세요'></td></tr>");
	});
	$("#choise").on("click", function(){
		$("#receiver").empty().append("<tr><td width='90px'><b>수령자이름</b></td><td width='300px'><input type='text' name='receiverName' size='15' placeholder='이름을입력하세요' value='${sessionScope.login_info.name }'></td>"+
			"<td width='90px'><b>휴대전화</b></td><td width='250px'><input type='text' name='receiverPhone' size='18' placeholder=''-'제외하고작성하시오' value='${sessionScope.login_info.phone }'></td></tr><tr><td><b>배송지</b></td>"+
			"<td><input type='text' placeholder='클릭하면 주소검색창이 나옴니다.' name='receiverAddress' id='receiverAddress' size='30' onclick='openDaumPostcode();'></td><td><b>상세주소</b></td>"+
			"<td><input type='text' name='receiverAddr' id='receiverAddr' placeholder='나머지주소를작성하세요'></td></tr><tr><td><b>Emai</b></td><td><input type='text' name='receiverEmail' size='30' placeholder='이메일을 입력해주세요' value='${sessionScope.login_info.email }'></td>"+
			"<td></td><td><input type='radio' id='choise'>위 정보와 동일함</td></tr>");
	});
});
</script>
<style type="text/css">
 	hr {border:#5FB404 2px solid;}
  	p {color:white; font-size: 40px; background-color: #5FB404; margin-left: 250px; margin-right: 250px;}
  	.order {font-weight:bold; color: black; padding-top: 7px; padding-bottom: 7px; }
  	.headline {margin-top: 0px; margin-bottom: 10px;}
  	.headtext {font-weight: bolder; color:#5FB404; margin-top: 20px; margin-bottom: 0px; font-style: 돋음; }
	button {padding-left: 0px; padding-right:0px; adding-right: 0px; border-left-width: 0px; border-top-width: 0px; 
				border-right-width: 0px; padding-top: 0px; padding-bottom: 0px; border-bottom-width: 0px;}
	.title {background-color:#C1BFA7;}
</style>
</head>
<h1 class="headtext">제품선택정보</h1>
<hr class="headline">
<div style="float: center;">
	<table class="table table-bordered">
		<tr>
			<td>
				<img width="200px"  height="210px" src="/${initParam.context_root }/product-img/${requestScope.pc.fileName }">
			</td>
			<td>
				<table class="table table-bordered">
					<tr>
						<td width="80px" class="title"><label>PC이름</label></td>
						<td width="200px">${requestScope.pc.completeName }</td>
						<td width="80px" class="title"><label>PC가격</label></td>
						<td width="200px">${requestScope.pc.completePrice }원</td>
						<td width="80px" class="title"></td>
						<td width="200px"></td>
					</tr>
					<tr>
						<td class="title"><label>메인보드</label></td>
						<td>${requestScope.pc.mainboardName }</td>
						<td class="title"><label>CPU</label></td>
						<td>${requestScope.pc.cpuName }</td>
						<td class="title"><label>쿨러</label></td>
						<td>${requestScope.pc.coolerName }</td>	
					</tr>	
					<tr>	
						<td class="title"><label>메모리</label></td>
						<td>${requestScope.pc.memoryName }</td>
						<td class="title"><label>그래픽</label></td>
						<td>${requestScope.pc.graphicName }</td>
						<td class="title"><label>HDD</label></td>
						<td>${requestScope.pc.hddName }</td>
					</tr>	 
					<tr>
						<td class="title"><label>SDD</label></td>
						<td>${requestScope.pc.ssdName }</td>
						<td class="title"><label>DVD</label></td>
						<td>${requestScope.pc.dvdName }</td>
						<td class="title"><label>사운드</label></td>
						<td>${requestScope.pc.soundName }</td>
					</tr>
					<tr>
						<td class="title"><label>파워</label></td>
						<td>${requestScope.pc.powerName }</td>
						<td class="title"><label>케이스</label></td>
						<td>${requestScope.pc.caseName }</td>
						<td class="title"><label>운영체재</label></td>
						<td>${requestScope.pc.osName }</td>
					</tr>	 
				</table>
			</td>
		</tr>
	</table>
	<hr class="headline">
</div><br><br>
<p>상품구매</p>	
<div align="center">
<form action="/${initParam.context_root }/order/order.do" method="post">
<input type="hidden" name="completeId" value="${requestScope.pc.completeId }">
<input type="hidden" name="deliveryPrice" value="${requestScope.deliveryInfo[0].defaultDeliveryFee }">
<table id="out">
	<tr>
		<td colspan="4"><h3 class="headtext">주문자 정보</h3></td>
	</tr>
	<tr>
		<td colspan="4"><hr class="headline"></td>
	</tr>
	<tr>
		<td width="90px"><b>주문자이름</b></td>
		<td width="250px"><input type="text" name="orderName" size="15" value="${sessionScope.login_info.name }"></td>		
		<td width="90px"><b>휴대전화</b></td>
		<td width="250px"><input type="text" name="orderPhone" size="18" value="${sessionScope.login_info.phone }"></td>
	</tr>
	<tr>	
		<td><b>주소</b></td> 
		<td colspan="4"><input type="text" name="orderAddress" id="orderAddress" size="75" value="${sessionScope.login_info.address }"></td>
	</tr>
	<tr>
		<td><b>Emai</b>l</td>
		<td><input type="text" name="orderEmail" size="30" value="${sessionScope.login_info.email }"></td>
	</tr>
	
	<tr>
		<td colspan="3"><h3 class="headtext">수령자 정보</h3></td>
	</tr>
	<tr>
		<td colspan="4"><hr class="headline"></td>
	</tr>
	<tbody id="receiver">
			<tr>
				<td width="90px"><b>수령자이름</b></td>
				<td width="300px"><input type="text" name="receiverName" size="15" placeholder="이름을입력하세요"></td>	
				<td width="90px"><b>휴대전화</b></td>
				<td width="250px"><input type="text" name="receiverPhone" size="18" placeholder="'-'제외하고작성하시오"></td>
			</tr>
			<tr>	
				<td><b>배송지</b></td> 
				<td><input type="text" placeholder="클릭하면 주소검색창이 나옴니다." name="receiverAddress" id="receiverAddress" size="30" onclick="openDaumPostcode();"></td>
				<td><b>상세주소</b></td>
				<td><input type="text" name="receiverAddr" id="receiverAddr" placeholder="나머지주소를작성하세요"></td>
			</tr>
			<tr>
				<td><b>Emai</b></td>
				<td><input type="text" name="receiverEmail" size="30" placeholder="이메일을 입력해주세요"></td>
				<td></td><td><input type="radio" id="choise">위 정보와 동일함</td>
			</tr>
	</tbody>
	<tr></tr>
	<tr>
		<td colspan="3"><h3 class="headtext">배송 정보</h3></td>
	</tr>
	<tr>
		<td colspan="4"><hr class="headline"></td>
	</tr>
	<tr>	
		<td><b>배송업체</b></td> 
		<td>${requestScope.deliveryInfo[0].enterpriseName }</td>
		<td><b>업체 전화번호</b></td>
		<td>${requestScope.deliveryInfo[0].tel }</td>
	</tr>
	<tr>
		<td><b>배송비</b></td>
		<td>${requestScope.deliveryInfo[0].defaultDeliveryFee }원</td>
		<td width="100px"><b>홈페이지</b></td>
		<td>${requestScope.deliveryInfo[0].homepage }</td>
	</tr>
	<tr></tr>
	<tr>
		<td colspan="3"><h3 class="headtext">결제하기</h3></td>
	</tr>
	<tr>
		<td colspan="4"><hr class="headline"></td>
	</tr>
	<tr>
		<td><h4 class="order">결제방법</h4></td>
		<td>
			<input type="radio" name="payway" value="cach" id="cash">현금 &nbsp;&nbsp;&nbsp;&nbsp;  
			<input type="radio" name="payway" value="card" id="card">신용카드&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="payway" value="phone" id="phone">핸드폰결제
		</td>
	</tr>
	<tbody id="tbody">
		
	</tbody>
	<tr>
		<td colspan="4"><hr class="headline"></td>
	</tr>
</table>
	<button type="submit"><img src="/${initParam.context_root }/img/order.jpg"></button>
</form>
</div>
